{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>FUNCTION PAGE</title>
    <style>
        {% include 'css/resetcss.css' %}
        body {
            background-color: #f8f8f8;
            height: 100vh;
            margin: 0;
            width: 100%;
            font-size: 0.8rem;
        }

        aside {
            background-color: #fff;
            width: 15%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            border-radius: 4px;
            box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); /* 添加右侧边框阴影效果 */
            overflow-y: auto;
        }

        .menu-list {
            width: 80%;
            height: 80%;
            padding: 10%;

            margin: 0;
            float: left;
            border-radius: 13px;
        }

        .menu {
            width: 100%;
            height: 8%;
            text-align: center;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .menu:hover {
            background-color: #f1f1f1; /* 统一的背景颜色 */
        }

        .page {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            position: fixed;
            width: 84%;
            right: 0;
        }

        #upload-page {
            display: none;
        }

        #upgrade-page {
            display: none;
        }

        #powerset-page {
            display: none;
        }

        .dropdown-menu div {
            padding: 10px;
            background-color: #f1f1f1;
            cursor: pointer;
        }

        .dropdown-menu div:hover {
            background-color: #ddd;
        }


        .menu.selected {
            background-color: rgba(76, 175, 80, 0.7);
            color: rgb(255, 255, 255);
            font-weight: bold;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: 0;
            transition: opacity 0.5s;
        }
    </style>

</head>
<body>
<script src="{% static 'js/alert.js' %}"></script>
<script>
    alert_success("加载成功 .... ")

    function changePage(code) {
        // 移除所有菜单的选中状态
        const menuList = document.getElementsByClassName('menu');
        for (let i = 0; i < menuList.length; i++) {
            menuList[i].classList.remove('selected');
            menuList[i].addEventListener('click', () => {
                changePage(menuList[i].id);
            })
        }
        let element = document.getElementById(code)
        // 将被点击的菜单设置为选中状态
        element.classList.add('selected');

        // 切换首页显示
        let pageId = code + '-page'

        // 所有页面都不显示
        const pageList = document.getElementsByClassName('page');
        for (let i = 0; i < pageList.length; i++) {
            pageList[i].style.display = 'none';
        }
        let page = document.getElementById(pageId)
        page.style.display = 'block';
    }
</script>


<aside>
    <script>
        let firstPageSelectd = false
        fetch('{% url 'menu' %}')
            .then(response => response.json())
            .then(menuData => {
                // 在这里进行菜单数据渲染
                const menuList = document.querySelector('.menu-list');

                menuData.data.forEach(menu => {
                    const menuElement = document.createElement('div');
                    menuElement.classList.add('menu');
                    menuElement.textContent = menu.name;
                    menuElement.addEventListener('click', () => {
                        changePage(menu.code);
                    });
                    menuElement.id = menu.code;
                    if (!firstPageSelectd) {
                        menuElement.classList.add('selected');
                    }
                    menuList.appendChild(menuElement);

                    // 创建页面 div
                    const page = document.createElement('div');
                    page.classList.add('page');
                    page.id = menu.code + '-page';
                    if (!firstPageSelectd) {
                        page.style.display = 'block';
                        firstPageSelectd = true
                    }
                    document.body.appendChild(page);

                    //创建 iframe 页面
                    const iframe = document.createElement('iframe');
                    iframe.classList.add('iframe');
                    console.log("{% url 'function_page_index' %}" + menu.code)
                    iframe.src = "{% url 'function_page_index' %}" + menu.code
                    page.appendChild(iframe);
                });
            });

    </script>
    <div class="menu-list">
    </div>

</aside>
</body>
</html>